<template>
	<view class="distri">
		<!-- <navBar isBack :backColor="Scroll >=100?'#333':'#fff'" title="分销中心" :color="Scroll >=100?'#333':'#fff'" :background="Scroll >=100?'#fff':'rgba(255,255,255,0)'"></navBar> -->
		<nav-bars :bgColor="Scroll >=100?'#fff':'rgba(255,255,255,0)'" title="分销中心" :fontColor="Scroll >=100?'#333':'#fff'"></nav-bars>
		<view class="d_topImg"><image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image></view>

		<!-- 头像信息 -->
		<view class="d_head">
			<view class="d_headImg">
				<image :src="userInfo.headimg" mode=""></image>
				<view class="d_headInfo">
					{{ userInfo.username }}
					<span>{{ userInfo.master == 1 ? '分销商' : '分销精英' }}</span>
				</view>
			</view>
			<view class="d_headRight" v-if="userInfo.master == 1" @click="_toRatioChange">
				<image src="https://manager.ryz1620.com/static/distri/fenxiao/commission.png" mode=""></image>
				佣金比率调整
			</view>
		</view>

		<!-- 佣金提现 -->
		<view class="d_myMoney">
			<view class="d_moneyNum">
				{{ Number(priceInfo.commission_amount).toFixed(2) }}
				<span>可提现佣金</span>
			</view>
			<view class="d_myMoneyOut" @click="_toWithdCom">佣金提现</view>
		</view>

		<!-- 选项列表 -->
		<view class="d_optionList">
			<view class="d_optionItem" @click="_toDistriMoney">
				<image src="https://manager.ryz1620.com/static/distri/fenxiao/distriMoney.png" mode=""></image>
				<view>
					{{ userInfo.commission }}元
					<span>分销佣金</span>
				</view>
			</view>
			<view class="d_optionItem" @click="_toMakerOrder">
				<image src="https://manager.ryz1620.com/static/distri/fenxiao/makerOrder.png" mode=""></image>
				<view>
					{{ userInfo.order }}笔
					<span>分销订单</span>
				</view>
			</view>
			<view class="d_optionItem" @click="_toWithdDetail">
				<image src="https://manager.ryz1620.com/static/distri/fenxiao/Withdrawal.png" mode=""></image>
				<view>
					{{ userInfo.withdrawal }}笔
					<span>提现明细</span>
				</view>
			</view>
			<view class="d_optionItem" @click="_toMakerElite" v-if="userInfo.master == 1">
				<image src="https://manager.ryz1620.com/static/distri/fenxiao/makerEli.png" mode=""></image>
				<view>
					{{ userInfo.member }}人
					<span>分销精英</span>
				</view>
			</view>
			<view class="d_optionItem" @click="_toAuditor" v-if="userInfo.master == 1">
				<image :src="`${baseImg}/static/distri/fenxiao/examine.png`" mode=""></image>
				<view>
					{{ userInfo.apply }}人
					<span>审核人员</span>
				</view>
			</view>
			<view class="d_optionItem" @click="_toMyCustomer">
				<image :src="`${baseImg}/static/distri/makerCenter/myUser.png`" mode=""></image>
				<view>
					{{ userInfo.user }}人
					<span>我的客户</span>
				</view>
			</view>
			<view class="d_optionItem" @click="_toMyGuideOrder">
				<image :src="`${baseImg}/static/distri/fenxiao/distriOrder.png`" mode=""></image>
				<view>
					{{ userInfo.guide_order }}笔
					<span>导购订单</span>
				</view>
			</view>
			<view class="d_optionItem" @click="_toBankCard">
				<image :src="`${baseImg}/static/distri/mybankcard.png`" mode=""></image>
				<view>
					{{ userInfo.bank_card_count }}张
					<span>我的银行卡</span>
				</view>
			</view>
			<view class="d_optionItem" @click="toSelectStore" v-if="userInfo.master != 1 && userInfo.parentCount>1">
				<image :src="`${baseImg}/static/distri/suoshu.png`" mode=""></image>
				<view>
					{{ userInfo.parentCount > 0 ? 1 : 0 }}人
					<span>所属创业主</span>
				</view>
			</view>
			<view class="d_optionItem" @click="toShopDistri">
				<image :src="`${baseImg}/static/adminShop/makerShop.png`" mode=""></image>
				<view>
					<!-- {{userInfo.parentCount>0?1:0}}人 -->
					<span>商品分销</span>
				</view>
			</view>
			<view class="d_optionItem" @click="toChangePrice">
				<image :src="`${baseImg}/static/adminShop/changePrice.png`" mode=""></image>
				<view>
					<!-- {{userInfo.parentCount>0?1:0}}人 -->
					<span>改价列表</span>
				</view>
			</view>
			<view class="d_optionItem" @click="toSuperHk" v-if="moduleType==1 || moduleType==2">
				<image :src="`${baseImg}/static/superHK/superHK1.png`" mode=""></image>
				<view>
					<!-- {{userInfo.parentCount>0?1:0}}人 -->
					<span>超级管家</span>
				</view>
			</view>
			<view class="d_optionItem" @click="toSuperHk" v-if="moduleType==3">
				<image :src="`${baseImg}/static/superHK/superHK2.png`" mode=""></image>
				<view>
					<!-- {{userInfo.parentCount>0?1:0}}人 -->
					<span>超级精英</span>
				</view>
			</view>
		</view>

		<!-- 其他功能 -->
		<view class="d_other">
			<button class="d_otherItem" :data-index="0" open-type="share" v-if="userInfo.master == 1">
				<view class="d_otherItem_right">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/invitation.png" mode=""></image>
					邀请分销精英
				</view>
				<image src="https://manager.ryz1620.com/static/distri/makerCenter/back.png" mode=""></image>
			</button>
			<button class="d_otherItem" :data-index="1" open-type="share">
				<view class="d_otherItem_right">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/extension.png" mode=""></image>
					客户推广
				</view>
				<image src="https://manager.ryz1620.com/static/distri/makerCenter/back.png" mode=""></image>
			</button>
			<view class="d_otherItem" @click="_toMyQRcode(userInfo.master, userInfo.username, userInfo.headimg)">
				<view class="d_otherItem_right">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/myQr.png" mode=""></image>
					个人二维码
				</view>
				<image src="https://manager.ryz1620.com/static/distri/makerCenter/back.png" mode=""></image>
			</view>
			<view class="d_otherItem" @click="_toScan">
				<view class="d_otherItem_right">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/saoyisao.png" mode=""></image>
					扫一扫
				</view>
				<image src="https://manager.ryz1620.com/static/distri/makerCenter/back.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
// import navBar from '@/components/navBar/navBar.vue';
import Https from '@/service/verification.js';
import service_distri from '@/service/distri.js';
export default {
	// components: {
	// 	navBar
	// },
	data() {
		return {
			baseImg: this.$static,
			userInfo: {},
			home: false,
			wxUserInfo: {},
			headimg: '',
			master: null,
			path: '',
			title: '',
			user_id: null,
			share: [
				{
					path: '/pagesOne/distri/bandEntre/bindEntre?follow_id=',
					title: '邀请分销精英'
				},
				{
					path: '/pagesOne/distri/index/toOtherMini?user_id=',
					title: '推广新用户'
				}
			],
			priceInfo: {},
			Scroll:'',
			moduleType:null,//超级管家类型
		};
	},
	onPageScroll(e) {
		this.Scroll = e.scrollTop
	},
	onLoad(options) {
		let pages = getCurrentPages(); //当前页
		if (pages.length == 1) {
			this.home = true;
		}
		
		this.moduleType = uni.getStorageSync('moduleType')
		this.user_id = this.$store.state.index.userId;
		// let userInfo = uni.getStorageSync('userInfo')
		// this.wxUserInfo = userInfo
		this.getDidtriInfo();
		this.getPriceInfo();
	},
	onShow() {
		this.getDidtriInfo();
		this.getPriceInfo();
	},

	onShareAppMessage(res) {
		console.log(res);
		let index = res.target.dataset.index;
		console.log(index);
		return {
			title: this.share[index].title,
			path: this.share[index].path + this.user_id,
			imageUrl: this.$static + '/static/adminShop/shareImg.png'
		};
	},

	methods: {
		// 获取钱包信息
		getPriceInfo() {
			this.$api.getPriceInfo({ level: 1 }).then(res => {
				console.log(res, '钱包信息');
				if (res.code == 1) {
					this.priceInfo = res.data ? res.data : {};
				}
			});
		},

		// 获取创客信息
		getDidtriInfo() {
			service_distri.get_DistriInfo().then(res => {
				console.log(res);
				if (res.code == 1) {
					this.userInfo = res.data ? res.data : {};
					this.master = res.data.master
				}
			});
		},

		//跳转到比率调整
		_toRatioChange() {
			uni.navigateTo({
				url: '../ratioChange/ratioChange'
			});
		},
		//跳转到分销佣金
		_toDistriMoney() {
			uni.navigateTo({
				url: `../distriMoney/distriMoney?master=${this.master}&commission=${this.userInfo.commission}`
			});
		},

		//跳转到分销订单
		_toMakerOrder() {
			uni.navigateTo({
				url: `../makerOrder/makerOrder?commission=${this.userInfo.commission}`
			});
		},

		// 跳转到我的银行卡
		_toBankCard() {
			// uni.navigateTo({
			// 	url: '/pagesOne/distri/bindBankCard/cardManage?level=1'
			// });
			this.getAccountInfo();
		},
		
		// 跳转到超级管家或者超级精英
		toSuperHk(){
			uni.navigateTo({
				url: `/pages_superHK/pages/superHK/index?headImg=${this.userInfo.headimg}`
			});
		},
		
		// 查询云商通账户信息
		getAccountInfo() {
			var that = this;
			let params = {};
			// let identityType = uni.getStorageSync('identityType'); //1企业,2个人
			// let isMaster = uni.getStorageSync('isMaster'); //1老板,0员工
			// console.log(identityType);
			Https.GetAccountMes(params).then(res => {
				if (res.code == 1) {
					console.log(res.data);
					var data = res.data;
					// member_type 会员类型(2企业会员,3个人会员)   is_realname 是否实名(0否,1是,2实名审核中)  is_phone	 是否绑定手机(0否,1是)
					// is_sign	是否签约(0否,1是)  signContract 签约参数
					if (data.is_realname == 0) {
						uni.showModal({
							title: '提示',
							content: '暂时还没实名验证,是否实名验证?',
							confirmText: '确定',
							success: function(res) {
								if (res.confirm) {
									// 会员类型(2企业会员,3个人会员)
									if (data.member_type == 2) {
										console.log(123);
										uni.navigateTo({
											url: '/pages_Verification/verification/select/certificate'
										});
										return;
									}
									if (data.member_type == 3) {
										console.log(456);
										uni.navigateTo({
											url: '/pages_Verification/verification/personal/personal'
										});
										return;
									}
									// if ( isMaster == 0&& identityType == 2) {
									// 	uni.navigateTo({
									// 		url: '/pages_Verification/verification/personal/personal'
									// 	});
									// 	return;
									// }
								}
							}
						});
						return;
					}
					if (data.is_realname == 1) {
						if (data.is_phone == 0) {
							uni.showModal({
								title: '提示',
								content: '暂时还没绑定手机号,是否绑定?',
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages_Verification/verification/bindPhone/BindPhone'
										});
									}
								}
							});
						} else if (data.is_sign == 0) {
							uni.showModal({
								title: '提示',
								content: '需要完善支付信息,是否继续?',
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										uni.navigateToMiniProgram({
											appId: 'wxc46c6d2eed27ca0a', //通商云平台账户小程序appId
											path: 'pages/merchantAddress/merchantAddress', //通商云平台小程序链接
											extraData: {
												// 测试环境地址：url=https://test.allinpay.com/yungateway/member/signContract.html?
												// 生产环境地址：url=https://fintech.allinpay.com/yungateway/member/signContract.html?
												// targetUrl: 'https://test.allinpay.com/yungateway/member/signContract.html?' + data.signContract.data.param //商户拼接的请求报文
												targetUrl: data.signContract
											},
											envVersion: 'release', //develop 开发版  trial 体验版  release 正式版
											success(res) {
												// 打开成功
												console.log(res);
											}
										});
									}
								}
							});
							// let url = encodeURIComponent('https://test.allinpay.com/yungateway/member/signContract.html?' + data.signContract.data.param);
							// uni.navigateTo({
							// 	url: '/pagesOne/verification/webview?url=' + url
							// });
						} else if (data.is_phone == 1 && data.is_sign == 1) {
							if (data.member_type == 3) {
								// 个人
								uni.navigateTo({
									url: '/pages_Verification/verification/bankCard/bankCardList?memberType=3&level=1'
								});
							} else if (data.member_type == 2) {
								// 企业
								uni.navigateTo({
									url: '/pages_Verification/verification/bankCard/bankCardList?memberType=2&level=1'
								});
							}
						}
						return;
					}
					if (data.is_realname == 2) {
						if (data.member_type == 3) {
							// 个人
							uni.navigateTo({
								url: '/pages_Verification/verification/status/status?isPersonal=true&status=0&isIndex=true'
							});
						} else if (data.member_type == 2) {
							// 企业
							uni.navigateTo({
								url: '/pages_Verification/verification/status/status?isPersonal=false&status=0&isIndex=true'
							});
						}
						return;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		// 查询云商通账户信息
		getAccountInfoOne() {
			var that = this;
			let params = {};
			let identityType = uni.getStorageSync('identityType'); //1企业,2个人
			// console.log(identityType);
			Https.GetAccountMes(params).then(res => {
				if (res.code == 1) {
					// console.log(res.data);
					var data = res.data;
					// member_type 会员类型(2企业会员,3个人会员)   is_realname 是否实名(0否,1是,2实名审核中)  is_phone	 是否绑定手机(0否,1是)
					// is_sign	是否签约(0否,1是)  signContract 签约参数
					if (data.is_realname == 0) {
						uni.showModal({
							title: '提示',
							content: '暂时还没实名验证,是否实名验证?',
							confirmText: '确定',
							success: function(res) {
								if (res.confirm) {
									// 初始化是个人还是企业  //1企业,2个人
									if (identityType == 1) {
										uni.navigateTo({
											url: '/pages_Verification/verification/select/certificate'
										});
										return;
									}
									if (identityType == 2) {
										uni.navigateTo({
											url: '/pages_Verification/verification/personal/personal'
										});
										return;
									}
								}
							}
						});
						return;
					}
					if (data.is_realname == 1) {
						if (data.is_phone == 0) {
							uni.showModal({
								title: '提示',
								content: '暂时还没绑定手机号,是否绑定?',
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages_Verification/verification/bindPhone/BindPhone'
										});
									}
								}
							});
						} else if (data.is_sign == 0) {
							uni.showModal({
								title: '提示',
								content: '需要完善支付信息,是否继续?',
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										uni.navigateToMiniProgram({
											appId: 'wxc46c6d2eed27ca0a', //通商云平台账户小程序appId
											path: 'pages/merchantAddress/merchantAddress', //通商云平台小程序链接
											extraData: {
												// 测试环境地址：url=https://test.allinpay.com/yungateway/member/signContract.html?
												// 生产环境地址：url=https://fintech.allinpay.com/yungateway/member/signContract.html?
												// targetUrl: 'https://test.allinpay.com/yungateway/member/signContract.html?' + data.signContract.data.param //商户拼接的请求报文
												targetUrl: data.signContract
											},
											envVersion: 'release', //develop 开发版  trial 体验版  release 正式版
											success(res) {
												// 打开成功
												console.log(res);
											}
										});
									}
								}
							});
							// let url = encodeURIComponent('https://test.allinpay.com/yungateway/member/signContract.html?' + data.signContract.data.param);
							// uni.navigateTo({
							// 	url: '/pagesOne/verification/webview?url=' + url
							// });
						} else if (data.is_phone == 1 && data.is_sign == 1) {
							// if (data.member_type == 3) {
							// 	// 个人
							// 	uni.navigateTo({
							// 		url: '/pages_Verification/verification/bankCard/bankCardList?memberType=3&level=1'
							// 	});
							// } else if (data.member_type == 2) {
							// 	// 企业
							// 	uni.navigateTo({
							// 		url: '/pages_Verification/verification/bankCard/bankCardList?memberType=2&level=1'
							// 	});
							// }
							uni.navigateTo({
								url: '../withdCom/withdCom?level=1&allCanPrice=' + this.priceInfo.commission_amount
							});
						}
						return;
					}
					if (data.is_realname == 2) {
						if (data.member_type == 3) {
							// 个人
							uni.navigateTo({
								url: '/pages_Verification/verification/status/status?isPersonal=true&status=0&isIndex=true'
							});
						} else if (data.member_type == 2) {
							// 企业
							uni.navigateTo({
								url: '/pages_Verification/verification/status/status?isPersonal=false&status=0&isIndex=true'
							});
						}
						return;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		// 点击分享链接
		// onShareAppMessage(res) {
		// 	console.log(res,'邀请')
		// 	let follow_id = this.$store.state.index.userId
		// 	return {
		// 		title: '邀请创客精英',
		// 		path: `/pagesOne/distri/bandEntre/bindEntre?follow_id=${follow_id}`,
		// 		imageUrl:this.$static + '/static/onePlusN/logo.png',
		// 	}
		// },

		// 邀请创客精英
		// share1(){
		// 	this.title = '邀请创客精英'
		// 	this.path = `/pagesOne/distri/bandEntre/bindEntre?follow_id=${this.user_id}`
		// },

		// // 客户推广
		// share2(){
		// 	this.title = '推广新用户'
		// 	this.path = `/pagesOne/distri/index/toOtherMini?user_id=${this.user_id}`
		// },

		//跳转到提现明细
		_toWithdDetail() {
			uni.navigateTo({
				url: '../withdDetail/withdDetail'
			});
		},

		//跳转到分销精英
		_toMakerElite() {
			uni.navigateTo({
				url: `../makerElite/makerElite?makerNum=${this.userInfo.member}`
			});
		},

		//跳转到佣金提现
		_toWithdCom() {
			// uni.navigateTo({
			// 	url: '../withdCom/withdCom?level=1&allCanPrice=' + this.priceInfo.commission_amount
			// });
			this.getAccountInfoOne();
		},

		//跳转到审核人员
		_toAuditor() {
			uni.navigateTo({
				url: '../auditor/auditor'
			});
		},

		//跳转到我的客户
		_toMyCustomer() {
			uni.navigateTo({
				url: '../myCustomer/myCustomer'
			});
		},

		// 跳转到导购订单
		_toMyGuideOrder() {
			uni.navigateTo({
				url: '../guideOrder/guideOrder'
			});
		},

		// 点击跳转到所属创业主
		toSelectStore() {
			let data = JSON.stringify(this.userInfo.parentData);
			uni.navigateTo({
				url: '../selectStore/index?data=' + encodeURIComponent(data)
			});
		},

		//跳转到个人二维码
		_toMyQRcode(master, name, img) {
			uni.navigateTo({
				url: `../myQRcode/myQRcode?master=${master}&username=${this.userInfo.username}&headimg=${this.userInfo.headimg}`
			});
		},

		// 跳转到商品分销
		toShopDistri() {
			uni.navigateTo({
				url: '/pages_makerMall/pages/list/list'
			});
		},
		// 跳转到改价列表
		toChangePrice() {
			uni.navigateTo({
				url: '/pages_makerMall/pages/index/index'
			});
		},

		//打开扫一扫
		_toScan() {
			// uni.navigateTo({
			// 	url:'../bandEntre/bindEntre'
			// })
			uni.scanCode({
				success: function(res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					console.log('路径', res.path);
					let urlNow = res.path.split('?')[0];
					console.log(urlNow);
					if (urlNow == 'pagesOne/distri/bandEntre/bindEntre') {
						uni.navigateTo({
							url: '/' + res.path
						});
					} else {
						uni.showToast({
							title: '无效二维码',
							icon: 'none'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.distri {
	padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
	padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
	.d_topImg {
		width: 100%;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	// 头像信息
	.d_head {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 24rpx 0 28rpx;
		.d_headImg {
			display: flex;
			align-items: center;
			image {
				width: 102rpx;
				height: 102rpx;
				border-radius: 50%;
				border: 4rpx solid #dba954;
			}
			.d_headInfo {
				margin-left: 24rpx;
				color: #fff;
				display: flex;
				font: 500 26rpx/40rpx PingFang SC;
				flex-direction: column;
				align-items: center;
				span {
					text-align: center;
					margin-top: 10rpx;
					width: 100rpx;
					font: 400 22rpx/36rpx PingFang SC;
					line-height: 36rpx;
					height: 36rpx;
					background-color: rgba(255, 255, 255, 0.3);
					color: #fff;
					border-radius: 18rpx;
				}
			}
		}
		.d_headRight {
			width: 196rpx;
			height: 52rpx;
			padding: 0 16rpx 0 16rpx;
			border: 2rpx solid #fff;
			border-radius: 26rpx;
			color: #fff;
			font: 400 22rpx/36rpx PingFang SC;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
	// 佣金提现
	.d_myMoney {
		position: relative;
		width: 702rpx;
		height: 150rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx 0 28rpx;
		margin: 90rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.d_moneyNum {
			display: flex;
			flex-direction: column;
			font: 600 36rpx/40rpx PingFang SC;
			color: #fa4e37;
			span {
				font: 600 22rpx/36rpx PingFang SC;
				color: #0a0605;
				margin-top: 8rpx;
			}
		}
		.d_myMoneyOut {
			width: 136rpx;
			height: 48rpx;
			text-align: center;
			border-radius: 24rpx;
			background-color: #dba954;
			color: #fff;
			font: 400 22rpx/48rpx PingFang SC;
		}
	}

	// 选项列表
	.d_optionList {
		margin-top: 40rpx;
		padding: 0 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.d_optionItem {
			width: 336rpx;
			height: 172rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			image {
				width: 64rpx;
				height: 64rpx;
				margin: 0 24rpx 0 52rpx;
			}
			view {
				font: 600 24rpx/36rpx PingFang SC;
				color: #fa4e37;
				display: flex;
				flex-direction: column;
				span {
					color: #0a0605;
					font: 600 26rpx/40rpx PingFang SC;
				}
			}
		}
	}

	// 邀请以及其他功能
	.d_other {
		margin: 40rpx auto 0;
		width: 702rpx;
		image {
			width: 32rpx;
			height: 32rpx;
		}
		.d_otherItem {
			width: 100%;
			height: 96rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 24rpx 0 28rpx;
			justify-content: space-between;
			font: 600 26rpx/40rpx PingFang SC;
			color: #0a0605;
			margin-bottom: 40rpx;
			.d_otherItem_right {
				display: flex;
				align-items: center;
				image {
					margin-right: 16rpx;
				}
			}
		}
	}
}
</style>
